Skip to content

Conversation

@RobinMalfait
Copy link
Member

When migrating a project from Tailwind CSS v3 to Tailwind CSS v4, then we started the migration process in the following order:

  1. Migrate the JS/TS config file
  2. Migrate the source files (found via the content option)
  3. Migrate the CSS files

However, if you have a setup where you have multiple CSS root files (e.g.: frontend and admin are separated), then that typically means that you have an @config directive in your CSS files. These point to the Tailwind CSS config file.

This PR changes the migration order to do the following:

  1. Build a tree of all the CSS files
  2. For each @config directive, migrate the JS/TS config file
  3. For each JS/TS config file, migrate the source files

If a CSS file does not contain any @config directives, then we start by filling in the @config directive with the default Tailwind CSS config file (if found, or the one passed in). If no default config file or passed in config file can be found, then we will error out (just like we do now)

@RobinMalfait RobinMalfait marked this pull request as ready for review November 4, 2024 13:15
@RobinMalfait RobinMalfait requested a review from a team as a code owner November 4, 2024 13:15
RobinMalfait and others added 14 commits November 4, 2024 17:25
We now make sure that `@config` exists, then we start the migration per
CSS file. This means that if the migration was successful that the
`@config` is still present. In this case we can remove it.
The `@config` is injected when running the migrations via the `migrate`
function. When running non-integration tests there is no file system and
we migrate the stylesheet(s) via `migrateContents` directly.

The integration tests ensure this is still working as intended.
Before this change, the output looked like this:
```
│ No input stylesheets provided. Searching for CSS files in the current directory and its subdirectories…

│ Error: Cannot find a CSS file where Tailwind CSS is setup.
Make sure to create a CSS file where Tailwind CSS is setup and try again.
```

After this change, it looks like this:
```
│ No input stylesheets provided. Searching for CSS files in the current directory and its subdirectories…

│ Error: Cannot find a CSS file where Tailwind CSS is setup.
│ Make sure to create a CSS file where Tailwind CSS is setup and try again.
```
@RobinMalfait RobinMalfait force-pushed the feat/multi-root-migrations branch from 8c55be9 to d838c9c Compare November 4, 2024 16:25
@RobinMalfait RobinMalfait changed the title Add multi-root migrations support Support migrating projects with multiple config files Nov 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants